<template>
  <div>
    <el-form :model="queryParams" inline size="small">
      <el-form-item label="认领年份">
        <el-date-picker
          v-model="queryParams.year"
          type="year"
          value-format="yyyy"
          placeholder="选择年份"
          :clearable="false"
          @change="handle_search"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="handle_search">查询</el-button>
        <!-- <el-button type="primary" plain @click="handle_showDialog('uploadDialog')">导入数据</el-button> -->
        
        <el-button type="primary" plain @click="handle_export">导出</el-button>
        <el-button type="primary" plain @click="$router.push('/budget/claim/log')">导入</el-button>
      </el-form-item>
      <el-form-item style="flex: 1;text-align: center">
        <i class="el-icon-info tips"><span>点击地市可进行认领数据回退</span></i>
      </el-form-item>
    </el-form>
    <div class="tableBox">
      <el-table
        v-loading="loading"
        :data="tableData"
        @header-click="handle_fallback"
        class="tableTh28"
        border
        ref="table"
        :height="tableHeight+''"
        :span-method="spanMethod"
        :header-cell-style="headerCellStyle"
      >
      <el-table-column 
        v-for="item in tableColumn" 
        :key="item.prop" 
        :label="item.label" 
        :prop="item.prop" 
        align="center" 
        :width="columnWidth/columnWidthWeightSum*columnWidthWeight[item.prop]+''">
      </el-table-column>
      </el-table>      
    </div>

  </div>
</template>
<script>
import { $budgetAPI } from "@/api";
import { getCookie } from "@/common/js/cookie";
import { mergeSpan } from "@/utils/mixin";
import { tableColumn, columnWidthWeight, areaMap } from "./data.js";
import { downLoadExcelBody } from "@/utils/zipdownload.js";
export default {
  data(){
    return {
      queryParams: {
        year: new Date().getFullYear() + ''
      },
      tableColumn,
      tableData: [],
      loading: false,
      spanArr: [],
      spanArr2: [],
      tableHeight: window.innerHeight - 230,
      columnWidth: window.innerWidth * 0.99 - 54,//表格总宽度
      columnWidthWeight,//宽度占比权重
      columnWidthWeightSum: 0,//宽度占比权重总和
    }
  },
  created(){
    for(let i in columnWidthWeight) this.columnWidthWeightSum += columnWidthWeight[i]; 
    window.addEventListener("resize", this.resizeTable);
    this.getData();
  },
  beforeDestroy(){
    window.removeEventListener("resize", this.resizeTable);
  },
  methods: {
    getData(){
      this.loading = true;
      $budgetAPI.superiorClaimQueryClaim(
        { token: getCookie("token"), year: this.queryParams.year },
        res => {
          this.alertError(res);
          if(res.code == 0){
            this.tableData = res.content;
            this.spanArr = mergeSpan(this.tableData, ['class1','class2']);
          }
          this.loading = false;
        },
        err => {
          this.alertError(err);
          this.loading = false;
        }
      )
    },
    handle_search(){
      this.getData();
    },
    //数据回退
    async handle_fallback({ label, property }){
      let areaId = areaMap[property];
      if(areaId === undefined) return;
      await this.$confirm(`确认回退${label}的认领数据吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      });
      $budgetAPI.superiorClaimFallback(
        { token: getCookie("token"), areaId, year: this.queryParams.year },
        res => {
          this.alertError(res);
          if(res.content.code == 0){
            this.$message.success(`回退${label}认领数据成功`);
            this.getData();
          } else {
            this.$message.error(`回退${label}认领数据失败`);
          }
        },
        err => {
          this.alertError(err);
        }
      )
    },
    handle_export(){
      downLoadExcelBody(
        "/superiorClaim/exportData", 
        { year: this.queryParams.year }, 
        this.queryParams.year + "年收入认领",
        'params'
      )
    },
    //合并
    spanMethod({rowIndex, columnIndex, row, column}){
      if(row.class2 === row.vName){
        if(columnIndex == 1) return [1, 2];
        else if (columnIndex == 2) return [0,0];
      }
      if (columnIndex == 0 || columnIndex == 1) {
        return this.spanArr[rowIndex][columnIndex];
      }
    },
    //改变表格高度和宽度
    resizeTable(){
      this.tableHeight = window.innerHeight - 230;
      this.columnWidth = window.innerWidth * 0.99 - 54;
      this.$nextTick(() => { this.$refs.table.doLayout(); });
    },
    headerCellStyle({ row, column }){
      // console.log(row,column);
      return {padding: '6px 0', 'font-size': '12px', 'font-weight': '500'}
    },
  },
}
</script>
<style lang="scss" scoped>
  /deep/ .el-form {
    display: flex;
    .tips {
      color: #909399;
      font-size: 20px;
      display: flex;
      align-items: center;
      padding-top: 5px;
      > span {
        font-size: 14px;
      }
    }
  }

  /deep/ .el-form-item__label {
		font-size: 13px;
		padding-right: 10px;
		line-height: 32px !important;
	}
  /deep/ .el-table {
    .el-table__row {
      td {
        height: 40px !important;
      }
      .cell {
        padding: 0 6px;
      }
    }
    .has-gutter > tr > th {
      &:nth-child(n+9){
        cursor: pointer;
        transition: all .2s;
        &:hover {
          color: rgb(91, 156, 255) !important;
        } 
      }
    }
  }
</style>